<!--
 * @Description: 缺陷成因列表
 * @Author: Liu Zhiwang
 * @Date: 2021-04-13 16:27:07
 * @LastEditTime: 2021-07-01 12:43:37
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="app-container v-flex">
    <filter-form :form="listQuery" :data="filterData" @search="search" />
    <div style="width: 40%">
      <template>
        <el-tabs v-model="listQuery.cId" type="card" @tab-click="handleClick">
          <el-tab-pane label="1C" name="JCJCTYPE01" />
          <el-tab-pane label="2C" name="JCJCTYPE02" />
          <el-tab-pane label="3C" name="JCJCTYPE03" />
          <el-tab-pane label="4C" name="JCJCTYPE04" />
          <el-tab-pane label="5C" name="JCJCTYPE05" />
          <el-tab-pane label="6C" name="JCJCTYPE06" />
        </el-tabs>
      </template>
      <div style="width: 250%"><p style="float: right">单位：天</p></div>
    </div>
    <div ref="main" class="v-flex-elastic">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="tableAll"
        border
        fit
        highlight-current-row
        tooltip-effect="dark"
        height="100%"
        style="width: 100%;">
        <el-table-column show-overflow-tooltip label="序号" align="center" min-width="150px">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="线路类型" align="center" min-width="150px">
          <template slot-scope="scope">
            <span>{{ scope.row.railtypeName }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="线路" align="center" min-width="150px">
          <template slot-scope="scope">
            <span type="text">{{ scope.row.lineName }}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column
          label="名称"
          width="140">
          <template scope="scope">
            <el-input  v-model="scope.row.lineName" ></el-input>
          </template>
        </el-table-column>-->
        <el-table-column v-for="item in tableTitle" :key="item.levelName" show-overflow-tooltip :label="item.levelName" align="center">
          <el-table-column label="整改周期" :prop="item.columnName+'Rect'">
            <template slot-scope="scope">
              <el-input v-model="scope.row[item.columnName+'Rect']" @change="changeRect(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column label="预警周期" :prop="item.columnName+'Early'">
            <template slot-scope="scope">
              <el-input v-model="scope.row[item.columnName+'Early']" @change="changeRect(scope.row)" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="操作" align="center" min-width="150px">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == '0' || scope.row.status == null " type="button" size="small" @click="enable(scope.row)"> 启用</el-button>
            <el-button v-show="scope.row.status == '1'" type="button" size="small" @click="enable(scope.row)"> 禁用</el-button>
            <!--<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="enable(scope.row)" />-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    <div class="page-box">
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getListPage" />
    </div>-->
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { tableMixin } from '@/utils/public'
import { getListByTypeCode } from '@/api/jcwwtk/categoryRectLevel'
import { listPage, enable, addOrEditData } from '@/api/jcwwtk/categoryRectifcation'

export default {
  name: 'CategoryRectifcation',
  components: {},
  mixins: [tableMixin],
  data() {
    return {
      listQuery: {
        page: 1,
        size: 10,
        deptCode: '',
        cId: 'JCJCTYPE01',
        typeCode: 'JCJCTYPE',
        railTypeName: ''
      },
      total: 0,
      tableKey: 0,
      height: 0,
      listLoading: false,
      tableData: [],
      tableTitle: [],
      tableAll: [],
      columns: [
        // { label: '所属单位', prop: 'shortName' },
        { label: '线路类型', prop: 'reasonName' },
        { label: '线路', prop: 'reasonCode' }
      ],
      filterData: {
        lineName: {
          key: 'lineName',
          type: 'input',
          placeholder: '线路名称'
        }
      },
      dialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        form: {
          status: 1,
          delFlag: 0,
          parentId: 0,
          deptCode: ''
        },
        initForm: {
          status: 1,
          delFlag: 0,
          parentId: 0,
          parentName: '',
          deptCode: ''
        },
        dataList: {
          causeList: []
        },
        rules: {
        }
      },
      dialogLook: {
        visible: false
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.listQuery.deptCode = this.userInfo.unitDeptCode
  },
  created() {
    this.getList()
    this.getListPage()
  },
  methods: {
    // 下拉数据获取
    getList() {
      getListByTypeCode(this.listQuery)
        .then((response) => {
          this.tableData = response.data.JCJCTYPE
          this.listLoading = false
        })
        .catch((_) => {
          this.listLoading = false
        })
    },
    // 新增
    addForm() {
      const dialog = {
        title: '新增缺陷成因',
        type: 'add',
        visible: true,
        disabled: false,
        loading: false,
        form: JSON.parse(JSON.stringify(this.dialog.initForm))
      }
      dialog.form.deptCode = this.userInfo.deptCode
      this.dialog = Object.assign(this.dialog, dialog)
    },
    // 查询
    search() {
      this.listQuery.page = 1
      this.getListPage()
    },
    // 列表查询
    getListPage() {
      this.listLoading = true
      listPage(this.listQuery)
        .then((response) => {
          this.tableTitle = response.data.list
          this.tableAll = response.data.all
          this.listLoading = false
        })
        .catch((_) => {
          this.listLoading = false
        })
    },
    // 新增或编辑弹框$emit 回调方法
    updateData(row) {
      addOrEditData(row)
        .then((response) => {
          this.currentRow = [response.data]
          if (this.dialog.type === 'add') {
            this.tableData.unshift(this.currentRow[0])
            this.total++
            this.notifiySuccess('添加成功')
            var dialog = this.dialog
            dialog.form.id = response.data.id
            this.dialog = Object.assign(this.dialog, dialog)
          } else {
            this.notifiySuccess('保存成功')
            this.getListPage()
          }
          this.dialog.loading = false
          this.dialog.visible = false
        })
        .catch((_) => {
          this.dialog.loading = false
        })
    },
    handleClick(tab, event) {
      this.search()
    },
    enable(row) {
      console.log(row)
      enable(row).then(respone => {
        this.notifiySuccess('保存成功')
        this.search()
      })
    },
    changeRect(row) {
      console.log(row)
      this.updateData(row)
    }
  }
}
</script>

